<template>
  <div class="dashboard">
    <div class="header">
      <div class="quit-info">
        <div class="quit" @click="handleExit">退出</div>
      </div>
      <div class="title">
        <img src="./img/titleCockpit.png" alt="">
        <div class="head-selection" style="width:850px ;">
          <el-select  style="width: 220px;" size="mini" v-model="queryParams.divisionIdList"
                     placeholder="请选择事业部" :multiple="true"  collapse-tags>
            <el-option
                v-for="(item,i) in deptList"
                :key="i"
                :label="item.divisionName"
                :value="item.divisionId">
            </el-option>
          </el-select>
          <el-select style="width: 220px;"  size="mini" v-model="queryParams.baseIdList" filterable clearable
                     placeholder="全部基地" :multiple="true"  collapse-tags>
            <el-option
                v-for="(item,i) in factoryList"
                :key="i"
                :label="item.baseName"
                :value="item.baseId">
            </el-option>
          </el-select>
          <el-date-picker
              class="echarts-head-date"

              size="mini"
              v-model="dateRange"
              type="daterange"
              :range-separator="$t('cockpit.to')"
              value-format="yyyy-MM-dd"
              format="yyyy年MM月dd日"
              @change="handleEchartDateChange"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              style="background-color: rgba(0,17,152,0.85);width: 350px;"
          >
          </el-date-picker>
        </div>
      </div>
      <div class="info">

        <div class="info-date">{{ today.toLocaleString().replace(/\//g, '-') }} 星期{{ days[today.getUTCDay()] }}</div>


      </div>
    </div>
    <div class="body" ref="body">
      <el-row type="flex" style="flex:1">

        <!-- 左侧 -->
        <el-col :span="17" style="margin: 0 8px;" :style="{width:((bodyWidth-16)/24) * 17+'px'}">
          <div class="dv-section">
            <div class="dv-title">{{ $t('cockpit3.incomingInspectionTaskList') }}</div>
            <dv-scroll-board :config="config1" :style="{width:'100%', height: `${(bodyHeight-75)*0.5}px` }"
            @click="clickConfig1"/>
          </div>
          <div class="dv-section mt5">
            <div class="dv-title">{{ $t('cockpit3.MRBList') }}</div>
            <dv-scroll-board :config="config2" :style="{width:'100%', height: `${(bodyHeight-75)*0.5}px` }"
            @click="clickConfig2"/>
          </div>

        </el-col>
        <!-- 右侧 -->
        <el-col :span="7" :style="{width:((bodyWidth-16)/24) * 7+'px'}">
          <div class="echart-box" style="margin-bottom: 8px" :style="{height:(bodyHeight-16)/3 + 'px'}">
            <div ref="echart3" style="width:100%;" :style="{height:(bodyHeight-16)/3 + 'px'}"></div>
          </div>
          <div class="echart-box" style="margin-bottom: 8px" :style="{height:(bodyHeight-16)/3 + 'px'}">
            <div ref="echart4" style="width:100%;" :style="{height:(bodyHeight-16)/3 + 'px'}"></div>
          </div>
          <div class="echart-box" :style="{height:(bodyHeight-16)/3 + 'px'}">
            <div ref="echart5" style="width:100%;" :style="{height:(bodyHeight-16)/3 + 'px'}"></div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>


</template>

<script>
import {
  inspectionTaskListApi,
  mrbListAPI,
  inspectionDecisionRate,
  inspectionCheckResultRatioAPI
} from '@/api/inspectionManagement/inspectionManagement'
import {divisionList,divisionAndBaseListAPI} from '@/api/masterdata/division'
import mixins from './mixins'
import {divisionRateByExtraAPI} from "../../api/inspectionManagement/inspectionManagement";

export default {
  name: "dashboard",
  dicts: ['AUDIT_TYPE', 'NYIQC_NCR_DECISION','ENVERSION_SHEET_STATUS'],
  components: {},
  mixins: [mixins],
  data() {
    return {
      today: new Date(),
      days: ['日', '一', '二', '三', '四', '五', '六'],
      echart1Tag: 'daterange',
      echart1Type: 'daterange',
      curEchart1Type: null,
      echart2Date: null,
      echart2Type: 'daterange',
      deptList: null,
      factoryList: [],
      dataMet: null,
      visibleEchart56: true,
      visible: false,
      visibleMrb: false,
      dataMrb: null,
      visibleStu: false,
      dataStu: null,
      visibleSup: false,
      dataSup: null,
      visibleMea: false,
      dataMea: null,
      bodyWidth: 0,
      bodyHeight: 0,
      multiple: false,
      clearable: false,
      queryParams: {divisionIdList: [], baseIdList: [], beginTime: null, endTime: null},
      materialList: [],
      dateRange:[],
      config1: {
        header: [this.$t('inventoryManagement.arrivalTime'), this.$t('material.materialCode'), this.$t('material.materialName'), this.$t('inventoryManagement.purchaseDocument'), this.$t('bomControl.bomsupplier'), this.$t('inventoryManagement.inspectionOrderstatus'), this.$t('cockpit3.emergencyReleaseOrNot')],
        rowNum: 7,
        // index: true,
        align: ['center','center', 'left', 'left', 'left', 'left', 'left', 'left'],
        columnWidth: [140, 140, 140, 140, 140, 140, 140],
        // headerBGC: '#0873DC',
        headerBGC: 'transparent',
        oddRowBGC: '#001B77',
        evenRowBGC: '#001766',
        data: undefined
      },
      config2: {
        header: [this.$t('cockpit3.OAOrderNumber'), this.$t('public.title'), this.$t('inventoryManagement.purchaser'), this.$t('inspectionManagement.materialBatch'), this.$t('inspectionManagement.materialName'), this.$t('cockpit3.materialQuantity'), this.$t('cockpit3.reviewDecision')],
        rowNum: 7,
        // index: true,
        align: ['center','center', 'left', 'left', 'left', 'left', 'left', 'left'],
        columnWidth: [150, 150, 150, 150, 150, 150, 150],
        // headerBGC: '#0873DC',
        headerBGC: 'transparent',
        oddRowBGC: '#001B77',
        evenRowBGC: '#001766',
        data: undefined
      },
    }
  },
  watch: {
    ["queryParams.divisionIdList"](val) {
      this.factoryList=[]
      for (let i = 0; i < val.length; i++) {
        const divisionIdIndex = this.deptList.findIndex(item => item.divisionId === val[i]);
        if (divisionIdIndex !== -1) {
          this.deptList[divisionIdIndex].baseList.forEach(item=>{
            const isExist = this.factoryList.findIndex(it => it.baseId === item.baseId);
            if (isExist === -1) {
              this.factoryList.push(item);
            }
          })
          this.queryParams.baseIdList=[]
          this.queryParams.baseIdList[0] = this.factoryList[0]?.baseId
        }
      }
      // if (val) {
      //   this.listALL()
      // }
    },
    ["queryParams.baseIdList"](val) {
      if (val && this.queryParams.divisionIdList) {
        this.listALL()
      }
    }
  },
  mounted() {
    this.domInit()
    this.initPage()
  },
  methods: {
    clickConfig1(config){
      debugger;
      var data=this.config1.data[config.rowIndex]
      console.log(data,config.rowIndex)
      this.$router.push({path: '/incomingDetail/index/'+data[7]})
    },
    clickConfig2(config){
      var data=this.config2.data[config.rowIndex]
      this.$router.push({path: '/inventory/mrbReview/' + +data[7] + '?viewType=3'})
    },
    async listALL() {
      this.initChart()
    },
    domInit() {
      const self = this;
      /** 监听文本框内容高度*/
      const observer = new ResizeObserver((entries) => {
        entries.forEach((entry) => {
          const cr = entry.contentRect;
          self.bodyWidth = cr.width
          self.bodyHeight = cr.height
        });
      });
      observer.observe(this.$refs.body);
    },
    handleEchartDateChange(e) {
      this.queryParams = {
        ...this.queryParams,
        beginTime: e ? e[0] : undefined,
        endTime: e ? e[1] : undefined,
      }
    },
    handleExit() {
      window.opener = null;
      window.open('', '_self');
      window.close();
      this.$router.go(-1)
    },
    async initPage() {
      //事业部门
      await divisionAndBaseListAPI().then(res => {
        this.deptList = res
        this.queryParams.divisionIdList.push(res[0]?.divisionId)
      })
    },

    formatCE_NCR(e) {
      if (e) {
        let obj = this.dict.type.NYIQC_NCR_DECISION.find((item) => {
          return item.value === e
        })
        if (obj) {
          return obj.label
        } else {
          return ''
        }
      } else {
        return ''
      }
    },

    formatOrderStatus(e) {
      if (e) {
        let obj = this.dict.type.ENVERSION_SHEET_STATUS.find((item) => {
          return item.value === e
        })
        if (obj) {
          return obj.label
        } else {
          return ''
        }
      } else {
        return ''
      }
    },
    handleQueryEchart3() {
      divisionRateByExtraAPI(this.queryParams).then(res => {
        this.initChart3(res.data || [])
      }, err => {
        this.initChart3([])
      })
    },
    handleQueryEchart4() {
      inspectionCheckResultRatioAPI(this.queryParams).then(res => {
        this.initChart4(res.data.inspectionRatioList || [])
      }, err => {
        this.initChart4([])
      })
    },
    handleQueryEchart5() {
      inspectionDecisionRate(this.queryParams).then(res => {
        this.initChart5(res.data || [])
      }, err => {
        this.initChart5([])
      })
    },
    initChart() {
      if (this.dateRange !== null && this.dateRange.length) {
        this.queryParams.beginTime = this.dateRange[0]
        this.queryParams.endTime = this.dateRange[1]
      } else {
        this.queryParams.beginTime = null
        this.queryParams.endTime = null
      }
      inspectionTaskListApi(this.queryParams).then(res => {
        this.config1 = {
          ...this.config1, data: res.data.map(i => {
            return [i.cputime, i.materialCode, i.materialName, i.ebeln, i.supplierName, this.formatOrderStatus(i.sheetStatus), i.release,i.id]
          })
        }
      })

      // MRB清单
      mrbListAPI({divisionIdList:this.queryParams.divisionIdList.join(","),baseIdList:this.queryParams.baseIdList.join(",")}).then(res => {
        this.config2 = {
          ...this.config2, data: res.data.map(i => {
            return [ i.ncrProcessId, i.title, i.initiatorName, i.lot, i.materialName, i.batchAmount, this.formatCE_NCR(i.usingDecision),i.id]
          })
        }
      })
      //echart3
      this.handleQueryEchart3()

      //echart4
      this.handleQueryEchart4()

      //echart5
      this.handleQueryEchart5()
    },
  }
}
</script>

<style scoped src="./index.scss" lang="scss"></style>
